<template>
  <div>
    <p>总数：{{total}}</p>
    <my-component v-model="total"></my-component>
    <br/>
    <p>总数：{{total2}}</p>
    <comp2 v-model="total2"></comp2>
    <button @click="handleReduce">-1</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      total:0,
      total2:0,
    }
  },
  methods:{
    handleReduce(){
      this.total2--;
    }
  },
  components:{
    'my-component':{
      template:'<button @click="handleClick">+1</button>',
      data(){
        return {
          counter:0,
        }
      },
      methods:{
        handleClick(){
          this.counter++;
          this.$emit('input',this.counter++);
        },
      }
    },
    'comp2':{
      props:['value'],
      template:'<input :value="value" @input="updateValue" >',
      methods:{
        updateValue(event){
          this.$emit('input',event.target.value);
        }
      }
    }
  }
}
</script>
<style scoped>

</style>


